{% extends 'cms/base.html' %}
{% block title %}轮播图(描述){% endblock %}
{% block header %}
    <style>
        .card .focus-show {
            height: 160px;
            border: 1px solid #ccc;
            overflow: hidden;
            text-align: center;
            line-height: 160px;
            cursor: pointer;
        }

        .card .focus-show img {
            height: 100%;
            vertical-align: top;
        }
    </style>
    <script type="text/html" id="focus-item">
        <div class="card focus-card">
            <div class="card-header">
                <div class="card-title">轮播图<small class="text-info">(暂无轮播图)</small></div>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-tool btn-close"><i
                            class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="focus-show">
                            <input type="text" hidden name="thumbnail">
                            <img src="" alt="">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="number" class="form-control" placeholder="优先级" min="1" max="6" name="priority">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="描述" name="desc">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="链接" name="link_to">
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <button class="btn btn-primary float-right save-btn">保存</button>
            </div>
        </div>
    </script>
{% endblock %}
{% block footer %}
    <script>
        function Focus() {
            this.focusWrapper = $('.focus-wrapper')
            this.addFlag = true
        }

        Focus.prototype.listenAddFocusTemplate = function () {
            var self = this
            var addBtn = $('.focus .add-btn')
            addBtn.click(function () {
                if (self.addFlag) {
                    self.addFlag = false
                    var html = template('focus-item')
                    self.focusWrapper.prepend(html)
                    self.listenAddFocus()
                }
            })
        }
        Focus.prototype.listenAddFocus = function () {
            var self = this
            var addBtn = $('.focus-card .save-btn')
            addBtn.click(function () {
                var card = $(this).parents('.card')
                var thumbnail = card.find('input[name=thumbnail]')
                var priority = card.find('input[name=priority]')
                var desc = card.find('input[name=desc]')
                var link_to = card.find('input[name=link_to]')
                if (thumbnail.val() && priority.val() && desc.val() && link_to.val()) {
                    xfzajax.post({
                        url: '/cms/news_focus_add/',
                        data: {
                            thumbnail: thumbnail.val(),
                            priority: priority.val(),
                            desc: desc.val(),
                            link_to: link_to.val(),
                        },
                        success: function (res) {
                            if (res.code !== 200) {
                                alert(res.message.constructor === String ? res.message : '添加轮播图失败, 请检查数据~~')
                            } else {
                                window.location.reload()
                            }
                        }
                    })
                } else {
                    alert('请检查数据~~')
                }
            })
        }
        Focus.prototype.listenSaveFocus = function () {
            var self = this
            var saveBtn = $('.card[data-pk] .save-btn')
            saveBtn.click(function () {
                var card = $(this).parents('.card')
                var focus_id = card.attr('data-pk')
                var thumbnail = card.find('input[name=thumbnail]')
                var priority = card.find('input[name=priority]')
                var desc = card.find('input[name=desc]')
                var link_to = card.find('input[name=link_to]')
                if (focus_id && thumbnail.val() && priority.val() && desc.val() && link_to.val()) {
                    xfzajax.post({
                        url: '/cms/news_focus_edit/',
                        data: {
                            focus_id: focus_id,
                            thumbnail: thumbnail.val(),
                            priority: priority.val(),
                            desc: desc.val(),
                            link_to: link_to.val(),
                        },
                        success: function (res) {
                            if (res.code !== 200) {
                                alert(res.message.constructor === String ? res.message : '修改轮播图失败~~')
                            }
                            window.location.reload()
                        }
                    })
                } else {
                    alert('请检查数据~~')
                }
            })
        }
        Focus.prototype.listenCloseFocus = function () {
            var self = this
            $('.focus-wrapper').on('click', '.btn-close', function () {
                var card = $(this).parents('.card')
                if (card.hasClass('focus-card')) {
                    card.remove()
                } else {
                    swal({
                        title: '删除轮播图?',
                        type: 'warning',
                        reverseButtons: true,
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                    }).then((result) => {
                        if (result) {
                            xfzajax.get({
                                url: '/cms/news_focus_del/',
                                data: {
                                    focus_id: card.attr('data-pk')
                                },
                                success: function (res) {
                                    if (res.code === 200) {
                                        card.remove()
                                    } else {
                                        alert(res.message.constructor === String ? res.message : '删除失败~~')
                                    }
                                }
                            })
                        }
                    })
                }
            })
        }
        Focus.prototype.listenUploadThumbnail = function () {
            var self = this
            $('.focus-wrapper').on('click', '.focus-show', function (e) {
                var focus = $(this).parents('.card')
                var fileInput = focus.find('.focus-show input[name=thumbnail]')
                var fileImg = focus.find('.focus-show img')
                var thumbnailFile = $('<input type="file">')
                thumbnailFile.trigger('click')
                thumbnailFile.change(function () {
                    var file = this.files[0]
                    var formData = new FormData()
                    formData.append('file', file)
                    xfzajax.post({
                        url: '/cms/upload/',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                            if (res.code === 200) {
                                fileImg.attr('src', res.data.url)
                                fileInput.val(res.data.url)
                            } else {
                                alert(res.message.constructor === String ? res.message : '图片上传失败~~')
                            }
                        }
                    })
                })
            })
        }
        Focus.prototype.run = function () {
            var self = this
            self.listenAddFocusTemplate()
            self.listenUploadThumbnail()
            self.listenSaveFocus()
            self.listenCloseFocus()
        }
        $(function () {
            var focus = new Focus()
            focus.run()
        })
    </script>
{% endblock %}
{% block content-header %}
    轮播图
{% endblock %}
{% block content %}
    <div class="card focus">
        <div class="card-footer">
            <button type="button" class="btn btn-primary add-btn">添加轮播图</button>
        </div>
    </div>
    <div class="focus-wrapper">
        {% for focus in focuses %}
            <div class="card" data-pk={{ focus.id }}>
                <div class="card-header">
                    <div class="card-title">轮播图<small class="text-info">({{ focus.desc }})</small></div>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                                class="fas fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-tool btn-close"><i
                                class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="focus-show">
                                <input type="text" hidden name="thumbnail" value="{{ focus.thumbnail }}">
                                <img src="{{ focus.thumbnail }}" alt="">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="number" class="form-control" name="priority" value="{{ focus.priority }}"
                                       placeholder="优先级"
                                       min="1" max="6">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" name="desc" placeholder="描述"
                                       value="{{ focus.desc }}">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" name="link_to" placeholder="链接"
                                       value="{{ focus.link_to }}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button class="btn btn-primary float-right save-btn">保存</button>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}